<template>
  <!-- 组件传值：
        获取组件实例传值
            <xxx ref='ooo' />
          父获取子实例：
              获取指定某个实例  this.$refs.ooo
              获取所有子实例  this.$children
          子获取父实例：
              子获取自己父级实例(子组件标签找自己最近的父级组件)：this.$parent
              找自己最顶层父级  this.$root

        父子传值
              <xxx :num="appNum" @setNum='appSetNum' />
              子组件内:
                 props:['num'],
                 this.$emit('setNum',实参值)
              v-mode
                 :value="xxx"  @input="xxx=$event"
              .sync
                 :xxx="appXxx"  @update:xxx="appXxx=$event"
                 :xxx.sync="appXxx"

         兄弟组件传值：可用于所有组件间的传值
          1：main.js在Vue的原型上挂载$bus=new Vue()
          2:
             this.$bus.$on("事件名",(参数)=>{...})  监听
             this.$bus.$emit('事件名',实参)         触发
             this.$bus.$off('事件名')               移除监听

          高阶组件向低阶组件传值
              传：provide(){ return {属性名:值} }
              收：inject:{属性名:{type...}}

           vuex

           $attrs与$listeners传值
           $attrs：父传子的非props属性（父传子，子没有使用props接收的属性）
           $listeners:父在子组件标签绑定的所有方法

-->

  <div>
    <Ccc
      xxx="123"
      ooo="456"
      src="https://www.baidu.com/img/PC_gaokao20240605_69257873b54a0da9d40aa7afdd9ec88d.gif"
      @click="fn"
      @xxx="getData"
    />
    <hr>
    <el-button @click="btnClick">父传子</el-button>
    <el-card>
      <Test ref="test" />
    </el-card>
    <hr>
    <Aaa />
    <Bbb />
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Aaa from './components/Aaa.vue'
import Bbb from './components/Bbb.vue'
import Ccc from './components/Ccc.vue'
export default {
  provide() {
    return {
      msg: '今天开始放假三天',
      that: this
    }
  },
  components: {
    Test,
    Aaa,
    Bbb,
    Ccc
  },
  data() {
    return {
      msg: '我是父组件'
    }
  },
  methods: {
    getData(num) {
      console.log('getData', num)
    },
    btnClick() {
      console.log('this', this.$xxx)
      console.log(this.$refs.test.num)
      console.log(this.$children)
    },
    fn() {
      alert('ok')
    }
  }
}
</script>
<style></style>
